<route lang="json5" type="page">
{
  type: 'page',
  needLogin: true,
  style: {
    navigationBarTitleText: '个人信息',
    navigationBarBackgroundColor: '#FFFFFF',  
  }, 
}
</route>
<template>
  <wd-form custom-class="custom-form ma-2" ref="form" :model="model" :rules="rules">
    <wd-cell-group>
      <wd-input
        prop="oldPwd"
        v-model="model.oldPwd"
        type="password"
        label="原密码"
        placeholder="请输入"
        align-right
      />
      <view class="custom-drivider"></view>
      <wd-input
        prop="newPwd"
        v-model="model.newPwd"
        type="password"
        label="新密码"
        placeholder="请输入"
        align-right
      />
      <view class="custom-drivider"></view>
      <wd-input
        prop="comfirmPwd"
        v-model="model.comfirmPwd"
        type="password"
        label="密码确认"
        placeholder="请输入"
        align-right
      />
    </wd-cell-group>
    <view class="fixed-bottom-btn flex justify-end gap-4">
      <wd-button type="info" plain @click="handleCancel" block>取消</wd-button>
      <wd-button type="primary" :loading="submitLoading" @click="handleSubmit" block>
        提交
      </wd-button>
    </view>
  </wd-form>
</template>

<script lang="ts" setup>
const submitLoading = ref(false)
const form = ref()
const model = reactive<{
  oldPwd: string
  newPwd: string
  comfirmPwd: string
}>({
  oldPwd: '',
  newPwd: '',
  comfirmPwd: '',
})
const rules = {
  oldPwd: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
  newPwd: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    {
      validator: (value: string) => {
        if (value && value === model.oldPwd) {
          return Promise.reject('新密码不能与原密码相同')
        }
        return Promise.resolve()
      },
      trigger: 'blur',
    },
  ],
  comfirmPwd: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      validator: (value: string) => {
        if (value !== model.newPwd) {
          return Promise.reject('两次输入的密码不一致')
        }
        return Promise.resolve()
      },
      trigger: 'blur',
    },
  ],
}
const handleCancel = () => {
  uni.navigateBack()
}
const handleSubmit = async () => {
  submitLoading.value = true
  try {
    form.value
      .validate()
      .then(({ valid, errors }) => {
        if (valid) {
          // '校验通过'
          console.log('model---', model)
          setTimeout(() => {
            uni.showToast({
              title: '密码修改成功',
              icon: 'none',
            })
            submitLoading.value = false
          }, 1500)
        } else {
          submitLoading.value = false
        }
      })
      .catch((error) => {
        console.log(error, 'error')
      })
  } catch (err) {
  } finally {
    // submitLoading.value = false
  }
}
</script>

<style lang="scss">
page {
  background: #f4f4f4;
  min-height: 100%;
}
.custom-form {
  padding: 16rpx;
  border-radius: 24rpx;
  background: #fff;
  :deep(.wd-input__error-message) {
    text-align: right;
  }
}
.custom-drivider {
  height: 1rpx;
  margin: 0 16rpx;
  background: #e5e5e5;
}
.fixed-bottom-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
  .wd-button {
    min-width: 132rpx !important;
  }
}
</style>

